import * as React from "react"
import { ViewStyle, View, FlatList, Image, TouchableOpacity } from "react-native"
import { color } from "@/theme"

import http from "../../services/api/apiLibrary"
import RecommonedMatchModel from "./RecommonedMatchModel"
import { px2dp } from "@/utils"
import HomeListView from "screens/home-screen/HomeListView"
import { images } from "@/assets"
import { HomeGameEntry } from "./home-game-entry"
import DrawerLayout from "react-native-drawer-layout"
import HomeSlideLeftView from "screens/home-screen/HomeSlideLeftView"
import HomeSlideRightView from "screens/home-screen/HomeSlideRightView"

const pageStyle: ViewStyle = {
  flex: 1,
  backgroundColor: color.palette.bgMain
}

interface HP {
  rootStore: any
  history?: any
}

interface HS {
  allMatchModels?: any
}

export default class HomeScreen extends React.Component<HP, HS> {
  state = {
    allMatchModels: ["", "", "", "", ""]
  }
  componentDidMount(): void {
    // setInterval(() => {
    //   // this.setState({allMatchModels:[]})
    //   this.loadData()
    // }, 5000)
  }

  loadData() {
    http.psotAtypia("/match/rec2", "").then((data: any) => {
      let leagueList = data.data
      let matchList = []
      leagueList.map(leagueItem => {
        let es = leagueItem.es
        let leagueName = leagueItem.c.n
        let iot = leagueName.t
        let sportId = leagueName.k
        es.map(item => {
          item["leagueName"] = leagueName
          item["t"] = iot
          item["sportId"] = sportId
          matchList.push(item)
        })
      })

      let footballModels = []
      let basketModels = []
      let tagData = []
      tagData.push(footballModels)
      tagData.push(basketModels)
      matchList.map(item => {
        let recommonedMatchModel = new RecommonedMatchModel(item)
        if (recommonedMatchModel.sportId === 1) {
          footballModels.push(recommonedMatchModel)
        } else {
          basketModels.push(recommonedMatchModel)
        }
      })
      this.setState({ allMatchModels: tagData })
    })
  }

  render() {
    return (
      <DrawerLayout
        drawerWidth={300}
        drawerPosition={DrawerLayout.positions.Left}
        renderNavigationView={() => {
          return <HomeSlideLeftView />
        }}
      >
        <DrawerLayout
          drawerWidth={300}
          drawerPosition={DrawerLayout.positions.Right}
          renderNavigationView={() => {
            return <HomeSlideRightView />
          }}
        >
          {this._renderHomeMain()}
        </DrawerLayout>
      </DrawerLayout>
    )
  }

  _renderHomeMain = () => {
    return (
      <View style={pageStyle}>
        <View
          style={{
            height: px2dp(60),
            backgroundColor: color.palette.white,
            justifyContent: "space-between",
            elevation: 5,
            flexDirection: "row",
            alignItems: "center"
          }}
        >
          <View style={{ flexDirection: "row", marginStart: px2dp(13) }}>
            <TouchableOpacity>
              <Image
                style={{ width: px2dp(24), height: px2dp(24) }}
                source={images.home.leftIcon}
              />
            </TouchableOpacity>
            <View style={{ width: px2dp(24), height: px2dp(24), marginStart: px2dp(13) }} />
          </View>
          <Image style={{ width: px2dp(128), height: px2dp(16) }} source={images.home.logoIcon} />
          <View style={{ flexDirection: "row", marginEnd: px2dp(13) }}>
            <TouchableOpacity>
              <Image
                style={{ width: px2dp(24), height: px2dp(24), marginEnd: px2dp(13) }}
                source={images.home.rightIcon}
              />
            </TouchableOpacity>
            <TouchableOpacity>
              <Image
                style={{ width: px2dp(24), height: px2dp(24) }}
                source={images.home.noteIcon}
              />
            </TouchableOpacity>
          </View>
        </View>
        <FlatList
          ListHeaderComponent={() => {
            return <HomeGameEntry />
          }}
          ListFooterComponent={() => {
            return <View style={{ height: 70 }} />
          }}
          style={{ flex: 1, backgroundColor: color.palette.bgMain }}
          data={this.state.allMatchModels}
          showsHorizontalScrollIndicator={false}
          showsVerticalScrollIndicator={false}
          renderItem={() => {
            return <HomeListView />
          }}
        />
      </View>
    )
  }
}
